<template>
  <div
    class="echart-line-wrapper"
    ref="wrapper"
    :style="{ width: '100%', height: '100%' }"
  ></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts/core'
import { BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { Ref, ref } from 'vue'

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  LineChart,
  LegendComponent,
  DatasetComponent,
  CanvasRenderer,
])

let wrapper: Ref<HTMLDivElement | null> = ref(null)

type yData = {
  name: string
  data: number[]
}

function init(name: string, xData: number[], yDatas: yData[]) {
  let chart = echarts.init(wrapper.value as HTMLDivElement)
  let series: any[] = []
  let colors = ['skyblue', 'orange', 'cyan', 'yellow', 'red', 'cyan']
  yDatas.forEach((data, idx) => {
    series.push({
      name: data.name,
      data: data.data,
      type: 'line',
      itemStyle: {
        color: colors[idx],
        lineStyle: {
          color: colors[idx],
        },
      },
    })
  })
  const option = {
    title: {
      text: name,
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    series,
    grid: {
      left: '1%',
      right: '4%',
      bottom: '23%',
      containLabel: true,
    },
    legend: {
      show: true,
      type: 'scroll',
      orient: 'horizontal',
      padding: 10,
      tooltip: {
        show: true,
      },
      bottom: '10%',
      // icon: 'rect'
    },
  }
  chart.setOption(option)
}
</script>

<style lang="less" scoped></style>
